import React, { useState, useEffect } from 'react'
import { Button, Checkbox } from 'react-vant';
import { useNavigate } from "react-router-dom"
import { ArrowLeft, UserCircleO, Arrow, AddO, Edit } from '@react-vant/icons';
import axios from "../uilst/axios"
type Props = {}

const PassengerList = (props: Props) => {
  const navigate = useNavigate()
  const username = localStorage.getItem("username")
  const [passengerlist, setpassengerlist] = useState([])
  useEffect(() => {
    axios.get("/passengerlist").then(res => {
      setpassengerlist(res.data)
    })
  }, [])
  return (
    <div className='passengerList'>
      <header>
        <div className="headertop">
          <span onClick={() => navigate(-1)} className='headertoplet'><ArrowLeft /></span><span className='headertopcon'>乘客列表</span><span></span>
        </div>
        <div className="headercon">
          <p className='com1p1'><span className='span1'><UserCircleO color='#FFFFFF' /></span><span>{username}</span></p>
          <p className='com1p2'><span>切换账号</span><span><Arrow /></span></p>

        </div>
      </header>
      <main>
        <div className='maintop'></div>
        <div className="button" onClick={() => navigate('/addpeople')}><AddO color='#00ACBD' fontSize={20} />&ensp;新增乘客</div>
        <div className="maincon">
          <div className="maincontop">下拉可刷新乘客列表</div>
          {
            passengerlist.map((item: any, index) => {
              return <div key={index} className="mainconitem">
                <span><Edit color='#999999' fontSize={25} /></span>
                <div>
                  <p><b>{item.name}</b><span>{item.teg}</span></p>
                  <p className='p2'>身份证:{item.carid}</p>
                </div>
                <span>
                  <Checkbox shape='square'></Checkbox>
                </span>
              </div>
            })
          }
        </div>
        <div className="mainfooter">本次购票服务由八维票务提供</div>
      </main>
      <footer>
        <Button type='primary' block round color='#00ACBD' style={{ height: "40px" }}>
          确定
        </Button>
      </footer>

    </div>
  )
}

export default PassengerList